<template>
  <div class="product-detail-view">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <ProductDetail v-else :product="product" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import ProductDetail from '../../components/ProductDetail.vue'
import axios from '../../axios/index.js'

const route = useRoute()
const product = ref(null)
const loading = ref(true)
const error = ref(null)

const fetchProductDetail = async () => {
  try {
    loading.value = true
    const response = await axios.get('/product/detail', {
      params: {
        id: route.params.id
      }
    })
    
    if (response.code === 1) { 
      // 处理数据，添加默认值和转换格式
      product.value = {
        ...response.data,
        unit: '500g',  // 添加默认单位
        storage: '冷藏保存',  // 添加默认存储方式
        shelfLife: '3天',  // 添加默认保质期
        origin: '本地养殖',  // 添加默认产地
        images: [  // 添加默认图片数组
          response.data.image || 'https://images.unsplash.com/photo-1607623814075-e51df1bdc82f?w=500&auto=format&fit=crop&q=60'
        ]
      }
      console.log('Processed product data:', product.value)  // 添加日志
    } else {
      error.value = response.msg || '获取商品详情失败'
      console.error('API Error:', response)  // 添加错误日志
    }
  } catch (err) {
    error.value = '获取商品详情失败，请稍后重试'
    console.error('Error details:', err)  // 添加详细错误信息
    console.error('Error response:', err.response)  // 添加响应错误信息
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchProductDetail()
})
</script>

<style scoped>
.product-detail-view {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px 0;
}

.loading, .error {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #666;
}

.error {
  color: #e74c3c;
}
</style> 